<template>
  <!-- 修改支付密码 -->
  <view>
    <view class="lealidator-box">
      <view class="title">修改支付密码</view>
      <u-field class="lablecolor" v-model="phone" label="手机号" placeholder="请填写手机号" :border-bottom="false">
      </u-field>
      <u-field class="lablecolor" v-model="yzm" label="验证码" placeholder="请输入验证码" :border-bottom="false">
        <text slot="right" class="yanzhengma" @click="sendcode">
          <text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
        </text>
      </u-field>
      <u-field class="lablecolor" type="password" v-model="pwd" label="密码" placeholder="请填写密码" :border-bottom="false">
      </u-field>
      <button class="btns" type="primary" @click="baocun">保存</button>
    </view>
    <view class="">

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        phone: '', // 手机号
        yzm: '', // 验证码
        pwd: '', // 密码
        codeTime: 0 // 倒计时时间
      }
    },
    methods: {
    // 获取验证码
      async sendcode() {
        // 手机号验证
        var reg=/^1[3|4|5|7|8][0-9]{9}$/
        if(reg.test(this.phone)==false){
          return uni.showToast({
            title:'请输入正确的手机号',
            icon:'none'
          })
        }
        // 验证码倒计时
        if(this.codeTime>0){
           uni.showToast({
             title:'不能重复获取',
             icon:'none',
             duration:2000
           })
         }else{
           this.codeTime=60
           let timer=setInterval(()=>{
             this.codeTime--;
             if(this.codeTime<1){
               clearInterval(timer)
               this.codeTime=0
             }
           },1000)
         }
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/send',
          data: {
            phone: this.phone
          }
        })
        if (res.code == 200) {
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
        }
      },
     async baocun(){
       if (this.phone.length ==0 || this.yzm.length==0 || this.pwd.length==0) {
       	return uni.showToast({
       		icon: 'error',
       		title: '手机号，验证码，密码不能为空',
           duration:2000
       	})
       }
       const {
         data: res
       } = await this.$myHttp({
         method: 'POST',
         url: 'shows/index/up_pay_pwd',
         data: {
           phone: this.phone,
           yzm: this.yzm,
           pay_pass: this.pwd,
           uid:uni.getStorageSync('uid'),
           token:uni.getStorageSync('token')
         }
       })
       if (res.code == 200) {
         uni.showToast({
           title: res.msg,
           icon: "none"
         })
       }else{
         uni.showToast({
           title: res.msg,
           icon: "none"
         })
       }
     },
    }
  }
</script>

<style>
  page {
    background-color: #121d3b;
    color: #FFFFFF;
  }

  .lealidator-box {
    margin: 100rpx 40rpx 0;
  }

  .title {
    font-size: 50rpx;
    margin-bottom: 50rpx;
  }

  .yanzheng {
    color: #FFFFFF;
    border: 1rpx solid #007AFF;
    padding: 10rpx 20rpx;
    color: #007AFF;
    border-radius: 10rpx;
  }

  .lablecolor {
    color: #FFFFFF;
  }

  .btns {
    margin-top: 100rpx;
  }
</style>
